<template>
    <view class="content-box center column" :style="style">
        <view class="center column content-box-qrcode pt-18" :class="{ dh: ready }">
            <hj-image mode="aspectFill" :img="qrcode" width="260rpx" height="260rpx" />
            <view class="ft-24 t-3 mt-16 line-height1">学员编号：00001</view>
        </view>
        <view class="ZKGaoDuanHei t-w line-height1 ft-44 mt-30 mb-30">
            <view class="content-box-but center" @click="handleSurvey"> 学习情况 </view>
            <view class="content-box-but center mt-20" @click="handleMall"> 积分商城 </view>
            <view class="content-box-but center mt-20" @click="handleRecom"> 我要推荐 </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 学员中心组件
 * @author yinzhi
 * @date 2025-03-18
 */
import { onReady } from '@dcloudio/uni-app'
import { ref, defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
defineComponent({
    name: 'StudentCenter'
})

// 推荐二维码
const qrcode = ref(
    ''
)

// 跳转到营销情况概览
const handleSurvey = () => {
    uni.navigateTo({
        url: '/pages/student/student-situation/index'
    })
}

// 跳转到积分商城
const handleMall = () => {
    uni.navigateTo({
        url: '/pages/goods/goods-list/index'
    })
}

/**
 * @description 推荐(推广页面)
 */
const handleRecom = () => {
    uni.navigateTo({
        url: '/pages/marketing/spread/index'
    })
}

// 导航栏高度
const navBarHeight = computed(() => store.state.platform.systemInfo?.navBarHeight || 0)
// 是否是 iPhone X以上机型 方便给出底部安全距离
const isIphoneX = computed(() => store.state.platform.systemInfo?.isIphoneX || 0)
// 样式 主要是计算出该模块的最小高度，防止部分机型页面内容不能铺满
const style = computed(() => {
    return {
        'min-height': `calc(100vh - ${navBarHeight.value}px - 590rpx - ${
            isIphoneX.value ? '20px' : '0rpx'
        })`
    }
})

// 页面是否已准备好，主要用于控制二维码动画效果
const ready = ref(false)
onReady(() => {
    ready.value = true
})
</script>

<style scoped lang="scss">
.content-box {
    padding: 40rpx 40rpx 20rpx;
    &-qrcode {
        width: 360rpx;
        height: 370rpx;
        border-radius: 30rpx;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
        border: 1px solid #999;
        background: $uni-bg-color;
        transition: all 1800ms;
        transform: translateY(100vh);
        position: relative;
        z-index: 10;
    }
    &-qrcode.dh {
        transform: translateY(0);
    }
    &-but {
        width: 420rpx;
        height: 88rpx;
        border-radius: 16rpx;
        border: 2rpx solid #fff;
        background: #608196;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
    }
}
</style>
